<template>
  <div class="page" ref="verifyPage" @mousemove="sliderMove($event)">
    <!-- @touchend="sliderLeave($event)"
   @touchmove="sliderMove($event)" -->
    <div class="verifyBox" ref="verifyBox">
      <div class="verBg" ref="verBg">
        <div class="verBgImg" ref="verBgImg">
          <img id="scream" ref="scream" :src="imgSrc" />
          <canvas
            id="puzzleBox"
            ref="puzzleBox"
            :class="[puzzleClass]"
            :width="w"
            :height="h"
          ></canvas>
        </div>
        <div :class="['puzzle-lost-box', puzzleClass]" ref="puzzleLostBox">
          <canvas
            id="puzzleShadow"
            ref="puzzleShadow"
            :width="w"
            :height="h"
          ></canvas>
          <canvas
            id="puzzleLost"
            ref="puzzleLost"
            :width="w"
            :height="h"
          ></canvas>
        </div>
        <p :class="['ver-tips', sliderClass]" v-if="vertips">
          <i style="background-position: -4px -1207px"></i>
          <span style="color: #42ca6b">验证通过</span> <span></span>
        </p>
        <p :class="['ver-tips', sliderClass]" v-else>
          <i style="background-position: -4px -1229px"></i>
          <span style="color: red">验证失败:</span>
          <span style="margin-left: 4px">拖动滑块将悬浮图像正确拼合</span>
        </p>
      </div>
      <div class="re-btn" @click="refVer"><a></a></div>
    </div>
    <br />
    <div class="btnBox" ref="btnBox">
      <div class="tipBox">
        <p class="tip">按住左边滑块，拖动完成上方拼图</p>
      </div>
      <div
        class="slider-btn"
        ref="sliderBtn"
        @mousedown="sliderBtnClick($event)"
        @mouseup="sliderLeave($event)"
      ></div>
      <!--  @touchstart="sliderBtnClick($event)" -->
    </div>
  </div>
</template>

<script>
import ver from "@/assets/verify/ver.png";
import ver1 from "@/assets/verify/ver-1.png";
import ver2 from "@/assets/verify/ver-2.png";
import ver3 from "@/assets/verify/ver-3.png";
// import $ from "jquery";
export default {
  data() {
    return {
      imgSrc: "",
      w: 370, // 260,
      h: 195, // 116,
      imgLibrary: [ver, ver1, ver2, ver3],
      moveStart: "", //定义一个鼠标按下的X轴值
      sliderClass: "",
      puzzleClass: "",
      X: 0,
      Y: 0,
      vertips: true,
    };
  },
  //   props: ["w", "h", "imgLibrary"],
  created() {
    this.randomImg();
  },
  mounted() {
    this.$refs.verifyBox.style.width = this.w + "px";
    this.$refs.verBg.style.width = this.w + "px";
    this.$refs.verBgImg.style.width = this.w + "px";
    this.$refs.verBgImg.style.height = this.h + "px";

    this.$refs.scream.style.width = this.w + "px";
    this.$refs.scream.style.height = this.h + "px";

    this.$refs.puzzleLostBox.style.width = this.w + "px";
    this.$refs.puzzleLostBox.style.height = this.h + "px";
    this.$refs.puzzleLostBox.style.left = this.left_Num + "px";

    this.$refs.btnBox.style.width = this.w + "px";

    // 随机生成缺失拼图
    this.drowVerImg();
    this.drowPuzzleLost();

    // $(".re-btn a").on("click", function () {
    //   // imgVer(Config);
    //   // TODO:
    // });
  },

  methods: {
    refVer() {
      this.reloadVer();
    },
    // 重载组件
    reloadVer() {
      this.$emit("reloadverify");
    },
    //* 鼠标按下 / 手指按下
    sliderBtnClick(e) {
      // 鼠标在滑块按下切换滑块背景
      e.target.style.backgroundPosition = "0 -216px";
      this.moveStart = e.pageX || e.originalEvent.targetTouches[0].pageX; //记录鼠标按下时的坐标 X轴值
    },
    //* 鼠标拖动 / 手指滑动
    sliderMove(e) {
      var moveX = e.pageX || e.originalEvent.targetTouches[0].pageX; //监听鼠标的位置
      var d = moveX - this.moveStart; //鼠标按住后在X轴上移动的距离
      if (this.moveStart == "") {
        // console.log('未拖动滑块');
      } else {
        if (d < 0 || d > this.w - this.padding - this.PL_Size) {
          // console.log('超过范围');
        } else {
          this.$refs.sliderBtn.style.left = d + "px";
          this.$refs.sliderBtn.style.transition = "inherit";

          this.$refs.puzzleLost.style.left = d + "px";
          this.$refs.puzzleLost.style.transition = "inherit";

          this.$refs.puzzleShadow.style.left = d + "px";
          this.$refs.puzzleShadow.style.transition = "inherit";
        }
      }
    },
    //* 鼠标松开 / 手指离开
    sliderLeave(e) {
      var e_pageX = this.moveStart;

      // e.originalEvent.changedTouches == undefined
      //   ? this.moveStart
      //   : e.originalEvent.changedTouches[0];
      var moveEnd_X =
        e.pageX - this.moveStart || e_pageX.pageX - this.moveStart; //松开鼠标后滑块移动的距离
      var ver_Num = this.X - 10;
      var deviation = 4; //偏差值
      var Min_left = ver_Num - deviation; //验证值最小值
      var Max_left = ver_Num + deviation; //验证值最大值
      if (this.moveStart == "") {
        console.log("");
      } else {
        if (Max_left > moveEnd_X && moveEnd_X > Min_left) {
          //成功执行
          this.sliderClass = "slider-tips";
          this.puzzleClass = "hidden";
          setTimeout(() => {
            this.sliderClass = "";
            this.reloadVer();
          }, 2000);
          // Config.success();
          this.$emit("successverify");
        } else {
          //失败执行
          this.vertips = false;
          this.sliderClass = "slider-tips";

          setTimeout(function () {
            this.sliderClass = "";
          }, 2000);
          // Config.error();
          this.$emit("errorverify");

          setTimeout(() => {
            this.$refs.sliderBtn.style.left = "0";
            this.$refs.sliderBtn.style.transition = "left 0.5s";
            this.$refs.puzzleLost.style.left = "0";
            this.$refs.puzzleLost.style.transition = "left 0.5s";
            this.$refs.puzzleShadow.style.left = "0";
            this.$refs.puzzleShadow.style.transition = "left 0.5s";
          }, 1000);
          this.$refs.sliderBtn.style.backgroundPosition = "0 -84px";
          this.moveStart = ""; //  清空上一次鼠标按下时的坐标X轴值;
        }
      }
    },
    // 随机生成缺失拼图
    drowVerImg() {
      //使用canvas画出缺失拼图
      var d = this.PL_Size / 3;
      var c = this.$refs.puzzleBox; //document.getElementById("puzzleBox");
      var ctx = c.getContext("2d");

      ctx.globalCompositeOperation = "xor";
      ctx.shadowBlur = 10;
      ctx.shadowColor = "#fff";
      ctx.shadowOffsetX = 3;
      ctx.shadowOffsetY = 3;
      ctx.fillStyle = "rgba(0,0,0,0.7)";

      ctx.beginPath();
      ctx.lineWidth = "1";
      ctx.strokeStyle = "rgba(0,0,0,0)";
      ctx.moveTo(this.X, this.Y);
      ctx.lineTo(this.X + d, this.Y);
      ctx.bezierCurveTo(
        this.X + d,
        this.Y - d,
        this.X + 2 * d,
        this.Y - d,
        this.X + 2 * d,
        this.Y
      );
      ctx.lineTo(this.X + 3 * d, this.Y);
      ctx.lineTo(this.X + 3 * d, this.Y + d);
      ctx.bezierCurveTo(
        this.X + 2 * d,
        this.Y + d,
        this.X + 2 * d,
        this.Y + 2 * d,
        this.X + 3 * d,
        this.Y + 2 * d
      );
      ctx.lineTo(this.X + 3 * d, this.Y + 3 * d);
      ctx.lineTo(this.X, this.Y + 3 * d);
      ctx.closePath();
      ctx.stroke();
      ctx.fill();
    },

    //生成缺失 的 拼图并且凸显
    drowPuzzleLost() {
      var d = this.PL_Size / 3;
      //生成缺失 的 拼图并且凸显
      var c_l = this.$refs.puzzleLost; //document.getElementById("puzzleLost");
      var c_s = this.$refs.puzzleShadow; //document.getElementById("puzzleShadow");
      var ctx_l = c_l.getContext("2d");
      var ctx_s = c_s.getContext("2d");
      //   var img = new Image(this.w, this.h);
      //   img.src = this.imgSrc;
      // img.onload = function () {
      //   ctx_l.drawImage(img, 0, 0, this.w, this.h);
      // };
      this.$refs.scream.addEventListener("load", () => {
        ctx_l.drawImage(this.$refs.scream, 0, 0, this.w, this.h);
      });

      ctx_l.beginPath();
      ctx_l.lineWidth = "5";
      ctx_l.strokeStyle = "#f00";
      ctx_l.strokeStyle = "rgba(0,0,0,0)";
      ctx_l.moveTo(this.X, this.Y);
      ctx_l.lineTo(this.X + d, this.Y);
      ctx_l.bezierCurveTo(
        this.X + d,
        this.Y - d,
        this.X + 2 * d,
        this.Y - d,
        this.X + 2 * d,
        this.Y
      );
      ctx_l.lineTo(this.X + 3 * d, this.Y);
      ctx_l.lineTo(this.X + 3 * d, this.Y + d);
      ctx_l.bezierCurveTo(
        this.X + 2 * d,
        this.Y + d,
        this.X + 2 * d,
        this.Y + 2 * d,
        this.X + 3 * d,
        this.Y + 2 * d
      );
      ctx_l.lineTo(this.X + 3 * d, this.Y + 3 * d);
      ctx_l.lineTo(this.X, this.Y + 3 * d);
      ctx_l.closePath();
      ctx_l.stroke();
      //   ctx_l.fill()
      ctx_l.clip();

      ctx_s.beginPath();
      ctx_s.lineWidth = "1";
      ctx_s.strokeStyle = "rgba(0,0,0,0)";
      ctx_s.moveTo(this.X, this.Y);
      ctx_s.lineTo(this.X + d, this.Y);
      ctx_s.bezierCurveTo(
        this.X + d,
        this.Y - d,
        this.X + 2 * d,
        this.Y - d,
        this.X + 2 * d,
        this.Y
      );
      ctx_s.lineTo(this.X + 3 * d, this.Y);
      ctx_s.lineTo(this.X + 3 * d, this.Y + d);
      ctx_s.bezierCurveTo(
        this.X + 2 * d,
        this.Y + d,
        this.X + 2 * d,
        this.Y + 2 * d,
        this.X + 3 * d,
        this.Y + 2 * d
      );
      ctx_s.lineTo(this.X + 3 * d, this.Y + 3 * d);
      ctx_s.lineTo(this.X, this.Y + 3 * d);
      ctx_s.closePath();
      ctx_s.stroke();
      ctx_s.shadowBlur = 20;
      ctx_s.shadowColor = "black";
      ctx_s.fill();
    },
    randomImg() {
      //生成缺失拼图的随机坐标 X,Y
      this.X = this.RandomNum(this.MinN_X, this.MaxN_X);
      this.Y = this.RandomNum(this.MinN_Y, this.MaxN_Y);

      //随机读取图片库的图片
      var imgRandom = this.RandomNum(1, this.imgLibrary.length); //从图库随机抽取
      this.imgSrc = this.imgLibrary[imgRandom];
    },
    //生成随机数的公共函数
    RandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      if (Math.round(Rand * Range) == 0) {
        return Min + 1;
      } else if (Math.round(Rand * Max) == Max) {
        // index++;
        return Max - 1;
      } else {
        var num = Min + Math.round(Rand * Range) - 1;
        return num;
      }
    },
  },
  computed: {
    PL_Size() {
      return 48;
    },
    padding() {
      return 20;
    },
    MinN_X() {
      return this.padding + this.PL_Size;
    },
    MaxN_X() {
      return this.w - this.padding - this.PL_Size - this.PL_Size / 6;
    },
    MaxN_Y() {
      return this.padding;
    },
    MinN_Y() {
      return this.h - this.padding - this.PL_Size - this.PL_Size / 6;
    },

    // 拼图初始化存在的left位置
    left_Num() {
      return this.X * -1 + 10;
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .slider-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    left: 0;
    top: -7px;
    z-index: 12;
    cursor: pointer;
    background-image: url(../../../assets/verify/sprite.3.2.0.png);
    background-position: 0 -84px;
    transition: inherit;
  }
  .ver-tips {
    position: absolute;
    left: 0;
    bottom: -22px;
    background: rgba(255, 255, 255, 0.9);
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    width: 100%;
    margin: 0;
    text-align: left;
    padding: 0 8px;
    transition: all 0.4s;
  }
  .slider-tips {
    bottom: 0;
  }
  .ver-tips i {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: top;
    background-image: url(../../../assets/verify/sprite.3.2.0.png);
    background-position: -4px -1229px;
  }
  .ver-tips span {
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    color: #455;
  }
  .active-tips {
    display: block;
  }

  .hidden {
    display: none;
  }
  .re-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 28px;
    padding: 0 16px;
  }
  .re-btn a {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 7px 0;
    background-image: url(../../../assets/verify/sprite.3.2.0.png);
    background-position: 0 -1179px;
    cursor: pointer;
  }
  .re-btn a:hover {
    background-position: 0 -1193px;
  }
}
.verifyBox {
  position: relative;
  padding: 16px 16px 28px;
  border: 1px solid #ddd;
  background: #f2ece1;
  border-radius: 16px;

  .verBg {
    position: relative;
    overflow: hidden;
    .verBgImg {
      position: relative;

      #puzzleBox {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 22;
      }
    }
    .puzzle-lost-box {
      position: absolute;
      top: 0;
      z-index: 111;
      #puzzleShadow {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 22;
      }
      #puzzleLost {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 33;
      }
    }
  }
}
.btnBox {
  position: relative;
  margin: auto;
  .tipBox {
    border: 1px solid #c3c3c3;
    border-radius: 24px;
    background: #ece4dd;
    box-shadow: 0 1px 1px rgba(12, 10, 10, 0.2) inset;
    .tip {
      font-size: 12px;
      color: #486c80;
      line-height: 28px;
      margin: 0;
      text-align: right;
      padding-right: 22px;
    }
  }
}
</style>
